
const app = Vue.createApp({
    data(){
        return {
            year: 2022 ,
            begin: 2000 ,
            end: 2022 ,
            show: false
        }
    },
    methods: {
        showCombobox(){
            this.show = true ;
        },
        handleUpdate( value ){
            // 将接受到的年份值保存到 year 属性中
            this.year = value ;
            // 修改 show 属性的值，使 combobox 隐藏
            this.show = false ;
        }
    }
});


app.component( 'combobox' , {
    props: [ 'modelValue', 'begin' , 'end' ],
    emits: ['update:modelValue'],
    template: `<div class="wrapper">
                  <span v-for="n in ( end - begin + 1 )" @click="select">
                    {{ begin + n - 1 }}
                  </span>
               </div>`,
    methods: {
        select(e){
            // 获得用户选择的年份
            let text = e.target.innerText ;
            // 触发事件并将年份传递给事件处理者
            this.$emit( "update:modelValue" , text );
        }
    }
});


app.mount( '#combobox' );